<template>
	<view class="detail">
		<view class="header">
			{{goodsObj.name}}
		</view>
		
		<!-- 内容 -->
		<scroll-view scroll-y="true" class="detailScroll">
			<image :src="goodsObj.listPicUrl" mode=""></image>
			<view class="tag">
				{{goodsObj.promTag}}
			</view>
			<view class="price">
				￥{{goodsObj.retailPrice}}
			</view>
			<view class="list" style="margin-left: 5%;font-size: 28upx;line-height: 50upx;">
				<view>1) 100%桑蚕丝填充，丝丝精粹不掺杂</view>
				<view>2) 创新井字拉网工艺，桑蚕丝不易黏连结块</view>
				<view>3) 两种面料可选，贡缎手感细腻，竹棉清爽透气</view>
				<view>4) AB双面设计，多种活性印花不易褪色</view>
			</view>

		</scroll-view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="img">	<!--图标-->
				<image src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type=webp" mode=""></image>
			</view>
			<view class="btn" @click="buy">立即购买</view>
			<view class="btn cart" @click="addCart">加入购物车</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import request from '../../utils/request.js';
	import Vue from 'vue';
	export default {
		data() {
			return {
				goodsObj:{},	//当前商品对象
				userInfo:{},
				allUserInfo:[]
			}
		},
		onLoad(options){
			//console.log(JSON.parse(options.goodsItem))
			this.goodsObj=JSON.parse(options.goodsItem);
		},
		mounted(){
			this.getAllUserInfo();
			wx.getStorage({
				key:'userInfo',
				success:(res)=>{
					this.userInfo=JSON.parse(res.data);
				}
			})
		},
		methods: {
			async getAllUserInfo(){
				const res=await request('/getUserInfo');
				this.allUserInfo=res.userInfo;
			},
			
			...mapMutations('cart',['addGoodsItemMutation']),
			
			addCart(){
				//this.addGoodsItemMutation(this.goodsObj)
				if(this.userInfo.nickName){
					//console.log(this.userInfo);
					var that=this;
					wx.showModal({
						title: '提示',
						content: '您确定将该商品加入购物车吗？',
						success(res) {
							if (res.confirm) {
								that.addGoodsItemMutation(that.goodsObj)
							}
						}
					})
				}else{
					wx.showModal({
						title: '提示',
						content: '请登录后再进行操作',
						success(res) {
							if (res.confirm) {
								wx.reLaunch({
									url:'/pages/personal/personal'
								})
							}
						}
					})
				}				
			},
			buy(){
				if(this.userInfo.nickName){
					var that=this;
					wx.showModal({
						title:'提示',
						content:'您确定下单商品吗？',
						success(res){
							if(res.confirm){
								if(that.userInfo.balance>=that.goodsObj.retailPrice){
									console.log(that.userInfo.nickName+'消费'+that.goodsObj.retailPrice+'元');
									var newBalance=that.userInfo.balance-that.goodsObj.retailPrice;
									request('/buy?account='+newBalance+'&nickName='+that.userInfo.nickName);
									that.getAllUserInfo();
									
									wx.showModal({
										title:'提示',
										content:'下单成功!',
										success(res){
											if (res.confirm) {
												that.refresh();
												wx.reLaunch({
													url:'/pages/detail/detail?goodsItem='+JSON.stringify(that.goodsObj)
												})
											}
										}
									})
								}else{
									wx.showModal({
										title:'提示',
										content:'余额不足!',
										success(res){
											if (res.confirm) {
												/*wx.reLaunch({
													url:'/pages/personal/personal'
												})*/
											}
										}
									})
								}
							}
						}
					})
				}else{
					wx.showModal({
						title: '提示',
						content: '请登录后再进行操作',
						success(res) {
							if (res.confirm) {
								wx.reLaunch({
									url:'/pages/personal/personal'
								})
							}
						}
					})
				}
			},
			refresh(){
				//修改Storage
				var that=this;
				var i,index;
				var flag=false;
				for(i=0;i<this.allUserInfo.length;i++){
					if(this.userInfo.nickName===this.allUserInfo[i].nickName){
						flag=true;
						index=i;
						break;
					}
				}
				wx.setStorage({
					key:"userInfo",
					data:JSON.stringify(that.allUserInfo[index])
				})
			}
		}
	}
</script>

<style lang="stylus">
	.detail
		.header
			height:90rpx
			line-height: 90rpx
			width: 570rpx
			text-align: center
			margin: 0 auto
		.detailScroll
			height: calc(100vh - 190rpx)
			image
				width: 100%
				height: 750rpx
			.tag
				width: 90%
				height: 100rpx
				line-height: 100rpx
				background-color: #bb2c08
				margin: 0 auto
				text-align: center
				color: #fff
				font-size: 32rpx
				border-radius: 10rpx
			.price
				font-size: 50rpx
				color: #dd1a21
				line-height: 70rpx
				margin-left: 5%
		.footer
			display flex
			position fixed;	//固定定位
			bottom 0
			left 0
			right 0
			height 100rpx
			line-height 100rpx
			border-top 1px solid #eee
			background-color #fff
			.img
				flex 1
				line-height 100rpx
				image
					display block
					margin 20rpx auto
					width 60rpx
					height 60rpx
			.btn
				flex 2
				border-left 1px solid #eee
				text-align center
				&.cart
					background-color #dd1a21
					color #fff
</style>